 <style lang="less">
@import "./../style/home.less";
</style>
<template>
    <div class="home">
        <div class="header" :style="{'background':currentTab == 3 ? 'rgba(0,0,0,0.51)' :background}">
            <div class="logo">
                <img src="./../../static/images/logo.png" alt="">
            </div>
            <div class="title">
                <ul>
                    <li :class="{'li-active' : currentTab == 1}" @click="setTable(1)">
                        <a href="#banner">首页</a>
                    </li>
                    <li :class="{'li-active' : currentTab == 2}" @click="setTable(2)">
                        <a href="#server">服务</a>
                    </li>
                    <li :class="{'li-active' : currentTab == 6}" @click="setTable(6)">
                        <a href="#daiban">代办</a>
                    </li>
                    <li :class="{'li-active' : currentTab == 3}" @click="setTable(3)">
                        <a href="#anli">案例</a>
                    </li>
                    <li :class="{'li-active' : currentTab == 4}" @click="setTable(4)">
                        <a href="#kehu">客户</a>
                    </li>
                    <li :class="{'li-active' : currentTab == 5}" @click="setTable(5)">
                        <a href="#about">关于</a>
                    </li>
                    <li :class="{'li-active' : currentTab == 7}" @click="setTable(7)">
                        <a href="#contact">联系</a>
                    </li>
                </ul>
                <div class="right">
                    <span class="qq-content">
                        <icon name="qq" scale="3"></icon>
                        <span class="qq">
                            <i>
                                <icon name="sjx" scale="3"></icon>
                            </i>{{systemconfig.qq}}</span>
                    </span>
                    <span>
                        <icon name="phone" scale="3"></icon>
                        :{{systemconfig.phone && systemconfig.phone.substr(systemconfig.phone.length-11)}}
                    </span>
                </div>
            </div>
        </div>
        <div class="title-min">
            <ul>
                <li :class="{'li-active' : currentTab == 1}" @click="setTable(1)">
                    <a href="#banner">首页</a>
                </li>
                <li :class="{'li-active' : currentTab == 2}" @click="setTable(2)">
                    <a href="#server">服务</a>
                </li>
                <li :class="{'li-active' : currentTab == 3}" @click="setTable(3)">
                    <a href="#anli">案例</a>
                </li>
                <li :class="{'li-active' : currentTab == 4}" @click="setTable(4)">
                    <a href="#kehu">合作</a>
                </li>
                <li :class="{'li-active' : currentTab == 5}" @click="setTable(5)">
                    <a href="#about">关于</a>
                </li>
                <li :class="{'li-active' : currentTab == 7}" @click="setTable(7)">
                    <a href="#contact">联系</a>
                </li>
                <li :class="{'li-active' : currentTab == 6}" @click="setTable(6)">
                    <a href="#daiban">代办</a>
                </li>
            </ul>
        </div>
        <template v-if="currentTab == 3">
            <anliC ref="anli"></anliC>
        </template>
        <template v-if="currentTab != 3">
            <div class="banner-content" name="banner">
                <swiper :options="swiperOption" ref="mySwiper">
                    <swiper-slide v-for="(slide,index) in swiperSlides" :key="index">
                        <img :src="slide.pic" alt="">
                        <!-- <img :src="require('./../../static/images/banner'+slide+'.png')" alt=""> -->
                    </swiper-slide>
                    <div class="swiper-pagination" slot="pagination"></div>
                </swiper>
            </div>
            <div class="content1 padding" id="server">
                <div class="title-content">
                    <div>服务范围</div>
                    <span>Work Place</span>
                </div>
                <div>
                    <ul class="ul-content">
                        <li class="li-1">
                            <div class="image-content">
                                <img src="./../../static/images/1icon.png" alt="">
                            </div>
                            <div>
                                <h3>App开发</h3>
                                <div>IOS Android 应用开发</div>
                                <div>掌控只能终端时代</div>
                            </div>
                        </li>
                        <li class="li-2">
                            <div class="image-content">
                                <img src="./../../static/images/2icon.png" alt="">
                            </div>
                            <div>
                                <h3>网站建设</h3>
                                <div>企业高端定制网站设计</div>
                                <div>彰显品牌形象</div>

                            </div>
                        </li>
                        <li class="li-3">
                            <div class="image-content">
                                <img src="./../../static/images/3icon.png" alt="">
                            </div>
                            <div>
                                <h3>UI/UX设计</h3>
                                <div>根据需求精心设计</div>
                                <div>追求极致质量</div>

                            </div>
                        </li>
                        <li class="li-4">
                            <div class="image-content">
                                <img src="./../../static/images/4icon.png" alt="">
                            </div>
                            <div>
                                <h3>公众号/小程序</h3>
                                <div>炫酷模板,全新体验</div>
                                <div>电商轻松走入微信</div>

                            </div>
                        </li>
                        <li class="li-5">
                            <div class="image-content">
                                <img src="./../../static/images/5icon.png" alt="">
                            </div>
                            <div>
                                <h3>代办服务</h3>
                                <div>一站式定制服务</div>
                                <div>为客户省时省力</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="content5 padding2" id="daiban">
                <div class="title-content">
                    <div>代办服务</div>
                    <span>Work Place</span>
                </div>
                <div class="ul-content">
                    <div class="left">
                        <h3>来自客户的心声</h3>
                        <div>
                            <img src="./../../static/images/fanlao.png" alt="">
                            <p>没时间配合开发方申请相关资料?</p>
                            <p>不知道开发方需要的资料在哪里申请?</p>
                            <p>不确定申请的资料符合开发方要求?</p>
                            <p>不知道自己的产品完成后怎么保护知识产权?</p>
                            <p>市场鱼龙混杂，花了时间，精力，不一定能办好事</p>
                        </div>
                    </div>
                    <div class="right">
                        <h3>我们帮您解决</h3>
                        <div class="flex-item">

                            <div>
                                <img src="./../../static/images/dianzan.png" alt="">
                            </div>
                            <div>
                                <p>我们提供一站式服务，所有资料都帮你代办</p>
                                <p>8年行业经验，专业的团队做专业的事</p>
                                <p>所有服务交给我，项目更能顺利完成</p>
                                <p>代办资料内部价格，让你省心省力更放心</p>
                                <p>你把需求给我，一切事情全由我来搞定！</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="line-content">
                    <div class="span-coontent">
                        <span>服务器租赁与配置</span>
                        <span>域名购买与备案</span>
                        <span>软件著作权申请&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>商标注册代办</span>
                        <span>苹果开发者账号申请</span>
                    </div>
                    <div class="span-coontent1">
                        <span>APP上架&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>支付接口申请</span>
                        <span>短信接口申请</span>
                        <span>APP上架专利申请</span>
                        <span>三方对接接口申请</span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IM接口申请</span>
                    </div>
                    <img src="./../../static/images/line.png" alt="">
                </div>
                <div class="line-content1">
                    <div class="span-coontent1">
                        <span style="heihgt:174px;line-height:174px">APP上架</span>
                        <span style="height:100px;line-height:30px">支付接口申请</span>
                        <span>短信接口申请</span>
                        <span style="height:127px;line-height:63px;">APP上架专利申请</span>
                        <span>三方对接接口申请</span>
                        <span style="line-height:175px">IM接口申请</span>
                    </div>
                    <div class="span-coontent">
                        <span>服务器租赁与配置</span>
                        <span>域名购买与备案</span>
                        <span style="display:inline-block;height:40px;">软件著作权申请</span>
                        <span>商标注册代办</span>
                        <span>苹果开发者账号申请</span>
                    </div>
                    <img src="./../../static/images/line-min.png" alt="">
                </div>
            </div>
            <div class="content2 padding">
                <div class="title-content">
                    <div>设计流程</div>
                    <span>Design Process</span>
                </div>
                <div>
                    <ul class="ul-content">
                        <li class="li-1">
                            <div class="image-content">
                                <!-- <img src="./../../static/images/1icon.png" alt=""> -->
                            </div>
                            <div>
                                <h3>需求沟通</h3>
                                <span>倾听客户要求,了解用户,使修改调整,规范完善</span>

                            </div>
                        </li>
                        <li class="li-2">
                            <div class="image-content">
                                <!-- <img src="./../../static/images/2icon.png" alt=""> -->
                            </div>
                            <div>
                                <h3>交互设计</h3>
                                <span>头脑风暴交互情景模拟,原型设计</span>

                            </div>
                        </li>
                        <li class="li-3">
                            <div class="image-content">
                                <!-- <img src="./../../static/images/3icon.png" alt=""> -->
                            </div>
                            <div>

                                <h3>视觉创意</h3>
                                <span>色彩及平面元素设定,结构和布局规范确认</span>
                            </div>
                        </li>
                        <li class="li-4">
                            <div class="image-content">
                                <!-- <img src="./../../static/images/4icon.png" alt=""> -->
                            </div>
                            <div>

                                <h3>前端制作</h3>
                                <span>HTML5,IOS,Android实现页面的动态展示</span>
                            </div>
                        </li>
                        <li class="li-5">
                            <div class="image-content">
                                <!-- <img src="./../../static/images/5icon.png" alt=""> -->
                            </div>
                            <div>

                                <h3>技术开发</h3>
                                <span>移动应用数据对接于开发</span>
                            </div>
                        </li>
                        <li class="li-6">
                            <div class="image-content">
                                <!-- <img src="./../../static/images/5icon.png" alt=""> -->
                            </div>
                            <div>

                                <h3>测试反馈</h3>
                                <span>修改调整,规范完善</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="content9 padding2" id="anli">
                <div class="title-content">
                    <div>案例展示</div>
                    <span>Case Show</span>
                </div>
                <div>
                    <ul class="ul-content" v-for="(arr,index) in product">
                        <li :class="{'width27':(index%2 == 0 && index1%2 ==0) || (index%2 == 1 && index1%2 == 1),'width23':(index%2 == 0 && index1%2 ==1) || (index%2 == 1 && index1%2 == 0)}" v-for="(li,index1) in arr">
                            <div class="content-li">
                                <!-- <img src="./../../static/images/1.jpg" alt=""> -->
                                <img :src="li.thumb_pic" alt="">
                                <div class="li-hover">
                                    <div>
                                        <p>{{li.title}}</p>
                                        <p class="li-hover-des">{{li.description}}</p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <ul class="ul-content1">
                        <template v-for="(item,index) in product">
                            <li v-for="el in item">
                                <div >
                                    <img :src="el.thumb_pic">
                                </div>
                                <div>
                                    <h3>{{el.category_title}}-{{el.title}}</h3>
                                    <span>{{el.description}}</span>
                                </div>
                            </li>
                        </template>
                    </ul>
                    <!-- <div>
                    <ul class="yuandian-content">
                        <li>
                            <span class="yuandian yuandian-active"></span>
                        </li>
                        <li>
                            <span class="yuandian"></span>
                        </li>
                    </ul>
                </div> -->
                </div>
            </div>
            <div class="content3 padding2" id="kehu">
                <div class="title-content">
                    <div>合作伙伴</div>
                    <span>Cooperative Partner</span>
                </div>
                <ul class="ul-content">
                    <li v-for="(el,index) in partner">
                        <!-- <img :src="require('./../../static/images/comm'+el+'.png')" alt=""> -->
                        <img :src="el.pic" alt="">
                    </li>
                </ul>
            </div>
            <div class="content4">
                <div class="title-content">
                    <div>选择我们</div>
                    <span>Choose Us</span>
                </div>
                <div class="content">
                    <ul class="ul-content">
                        <li>
                            <div>

                                <div class="image-content">
                                    <img src="./../../static/images/chooseus-1icon.png" alt="">
                                </div>
                                <h3>实惠的价格</h3>
                                <span>成本低，回报高</span>
                            </div>
                        </li>
                        <li>
                            <div>

                                <div class="image-content">
                                    <img src="./../../static/images/chooseus-2icon.png" alt="">
                                </div>
                                <h3>专业的团队</h3>
                                <span>开发快，周期短</span>
                            </div>
                        </li>
                        <li>
                            <div>

                                <div class="image-content">
                                    <img src="./../../static/images/chooseus-3icon.png" alt="">
                                </div>
                                <h3>过硬的技术</h3>
                                <span>技术好，效率高</span>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="image-content">
                                    <img src="./../../static/images/chooseus-4icon.png" alt="">
                                </div>
                                <h3>满意的服务</h3>
                                <span>服务好，质量优</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="content6 padding1" id="about">
                <div class="title-content">
                    <div>关于我们</div>
                    <span>About us</span>
                </div>
                <ul class="ul-content ">
                    <li>
                        <div class="max-dispaly">
                            <img src="./../../static/images/pictrue1.png" alt="">
                        </div>
                        <div>
                            <!-- <div> -->
                            <div class="margin2">
                                <span class="weight5">客户资源 ：</span>
                                <span>客户遍布
                                    <span class="color-orgin">中国内地、港台、新加坡、日本、澳大利亚、柬埔寨、英美</span>等全球各地
                                </span>
                            </div>
                            <div class="margin2">
                                <span class="weight5"> 成果展示 ：</span>
                                <span style="color:#999;">
                                    <p>公司拥有很多个成功案例</p>
                                    <p>其中“手工课网站”由个人运作发展为公司规模</p>
                                    <p>“红包君”已完成A轮融资</p>
                                    <p>“衣适衫”已获得第三轮融资</p>
                                    <p>“七彩云夺宝”已获得超5000万融资等。</p>
                                </span>
                            </div>
                            <!-- </div> -->
                        </div>
                        <div class="min-dispaly">
                            <img src="./../../static/images/pictrue1.png" alt="">
                        </div>
                    </li>
                    <li>
                        <div>
                            <!-- <div> -->
                            <div class="margin2">
                                <span class="weight5">公司宗旨 ：</span>
                                <span class="color-orgin">追求极致，争创卓越</span>
                            </div>
                            <div class="margin2">
                                <span class="weight5">提供服务 ：</span>
                                <span style="color:#999">
                                    <p>拥有JAVA、C、C++、C#、Python、Android、</p>
                                    <p>IOS、PHP、HTML/CSS/JS、大数据、云计算等</p>多个领域核心技术不断精进,力求完美。</span>
                            </div>
                            <!-- </div> -->
                        </div>
                        <div class="margin3">
                            <img src="./../../static/images/pictrue2.png" alt="">
                        </div>
                    </li>
                </ul>
            </div>
            <div class="content7 padding2">
                <div class="title-content">
                    <div>核心团队</div>
                    <span>Core Team</span>
                </div>
                <div class="content">
                    <transition-group name="slide-fade">
                        <ul class="ul-content" :class="{'absolute':currentIndex != index}" v-for="(el,index) in coreTeam" :key="index" v-show="currentIndex == index">
                            <li v-for="(ele,index) in el" :key="index">
                                <img :src="ele.pic" alt="">
                                <p class="name">{{ele.name}}</p>
                                <p class="zhiwei">{{ele.position}}</p>
                            </li>
                        </ul>
                    </transition-group>
                </div>
                <div>
                    <ul class="yuandian-content">
                        <li v-for="(el,index) in coreTeam" @click="currentIndex = index">
                            <span class="yuandian yuandian-active"></span>
                        </li>
                    </ul>
                </div>
            </div>
        </template>
        <div class="content8" id="contact">
            <template v-if="currentTab != 3">
                <div class="title-content">
                    <div>联系我们</div>
                    <span>Contact Us</span>
                </div>

            </template>
            <div>
                <template v-if="currentTab != 3">
                    <div class="map-content">
                        <img class="back-max" src="./../../static/images/contactus-background.png" alt="">
                        <img class="back-min" src="./../../static/images/chooseus-background-min.png" alt="">
                        <div class="content">
                            <p>
                                地址:{{systemconfig.email}}
                            </p>
                            <p>
                                电话:{{systemconfig.phone}}
                            </p>
                            <p>
                                QQ:{{systemconfig.qq}} 欢迎咨询
                            </p>
                            <div class="qrcode-content">
                                <img src="./../../static/images/qrcode.png" alt="">
                                <div style="margin-left:20px">
                                    <p>关注微信号</p>
                                    <p>{{systemconfig.wechat}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="map-min">
                        <img style="width:100%" src="./../../static/images/map-min.png" alt="">
                    </div>
                </template>
                <div style="background: #757673;">
                    <div class="footer-content">
                        <div class="left">
                            <p>
                                电话:{{systemconfig.phone}}
                            </p>
                            <p>
                                邮箱:{{systemconfig.email}}
                            </p>
                            <p>
                                地址:{{systemconfig.comany_address}}
                            </p>
                        </div>
                        <div class="right">
                            <p>
                                <img src="./../../static/images/logo-bottom.png" alt="">
                            </p>
                            <p>{{systemconfig.site_name}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="copyright">{{systemconfig.copyright}}</div>

    </div>
</template>

<script>
import anliC from "./anli.vue";
export default {
  components: {
    anliC
  },
  data() {
    return {
      currentTab: 1,
      swiperOption: {
        pagination: {
          el: ".swiper-pagination"
        },
        autoplay: true,
        speed: 400
      },
      background: "none",
      swiperSlides: [],
      coreTeam: [],
      currentIndex: 0,
      partner: [],
      product: [],
      systemconfig: {}
    };
  },
  mounted() {
    // for (let i = 0; i < 3; i++) {
    //   this.swiperSlides.push(this.swiperSlides.length + 1);
    // }
    document.querySelector("body").onscroll = e => {
      let height = document.documentElement.scrollTop;
      if (height > 100) {
        this.background = "rgba(0,0,0,0.51)";
      } else {
        this.background = "none";
      }
    };
    this.init();
  },
  methods: {
    setTable(val) {
      this.currentTab = val;
      this.$nextTick(res => {
        if (this.$refs.anli) {
          this.$refs.anli.isDetail = false;
        }
      });
    },
    init() {
      this.$axios
        .get("/api/slideshow.php", { params: { order: "add_time" } })
        .then(res => {
          this.swiperSlides = res.data.result.data.data || [];
        });
      this.$axios
        .get("/api/coreteam.php", { params: { order: "add_time" } })
        .then(res => {
          let arr = [[]];
          let list = res.data.result.data.data || [];
          for (let i = 0; i < list.length; i++) {
            arr[arr.length - 1].push(list[i]);
            if (arr[arr.length - 1].length >= 4 && i < list.length - 1) {
              arr.push([]);
            }
          }
          this.coreTeam = arr;
        });
      this.$axios
        .get("/api/partner.php", { params: { order: "add_time" } })
        .then(res => {
          this.partner = res.data.result.data.data;
        });
      this.$axios
        .get("/api/product.php", { page: 1, page_size: 12 })
        .then(res => {
          let list = res.data.result.data.data || [];
          let arr = [];
          for (let i = 0; i < list.length; i++) {
            if (arr[parseInt(i / 4)] == undefined) {
              arr.push([]);
            }
            arr[parseInt(i / 4)].push(list[i]);
          }
          this.product = arr;
        });
      this.$axios.get("/api/systemconfig.php").then(res => {
        this.systemconfig = res.data.result.data || {};
      });
    }
  }
};
</script>

